4a

Magic 8 for AI — paper field

Inverted: the field is the card stock, #FBF6EE, and the ink is navy #1A3E68 — the same relationship as an unstamped bingo square. Green can't carry text at this value, so it does exactly one job across the whole device: the rule under the move. It appears nowhere else but the wake dot.

Sizes are set against the physical panel, not the artboard — 39 mm across 480 px is a 0.081 mm pitch, so 26 px is 2.1 mm and nothing on the device falls below it · board 07 is live, tap it

01 — asleep panel off

Asleep stays dark — an unlit AMOLED can't hold cream, and a black object in the hand reads as an object. The paper only exists while the device is awake.

02 — lift motion wake · instant

The field snaps from #0D2038 straight to paper — no cross-fade, which would cost a full-screen redraw the device can't afford. One breathing hairline ring and the single green dot.

03 — swirl anticipation · 750 ms

Three hairline arcs at different rates, weighted light to navy as they tighten inward. Stroke pixels only — no framebuffer copy.

03b — swirl, static rings anticipation · 750 ms

Three static hairline rings with a dot travelling each one. Same speeds, same counter-rotation, roughly 1,000 changed pixels per frame instead of 160,000.

04 — reveal roboto serif · 52 px
Create a simulator of your boss

Roboto Serif medium, navy on stock, 10.2:1. The green rule under the move is the accent and the affordance both — it's what you tap.

05 — tap for more serif 36 · mono 28
Create a simulator of your boss
Feed it three of their memos, then let it review your plan.
tap to learn more

Mono at 28 px is 2.3 mm on the real panel — subordinate to the serif but still in the range a phone uses. The column reserves a 92 px band for the footer hint, so the text can never grow into it. The overline came out: the move is right there, and the layout needed the 42 px more than it needed a label.

05b — hint, navy hint at full ink
Create a simulator of your boss
Feed it three of their memos, then let it review your plan.
tap to learn more

The same hint at full navy, weight 500, and a 2 px arrow. It reads as an instruction rather than a caption — the question is whether that competes with the move above it.

06 — take it with you 33 modules · 8 px each
learn how to do this move

Every move carries its own code, pointing at its own page. Navy modules on stock at 10.2:1 — the paper field is what makes this state scannable at all. 108 px of quiet zone each side, 36 px below, both past the four-module minimum.

07 — live timing tap to run
shake
{{ move }}
{{ move }}
{{ detail }}
tap to learn more
learn how to do this move

Tap: the swirl holds {{ holdLabel }}, the move rises over 320 ms and the rule draws in behind it. Tap for the description, tap again for the code, once more to sleep; tap the dark field to wake it on the next move.

Wrapping check — reveal state at three lengths

Board 04 at three type steps, with the rule holding 32 px of clearance below the last line. 46 characters lands in three lines at 40 px with a line of headroom, so the practical ceiling is nearer 60 — past that the move belongs in the description state.

short — 18 ch · 66 px · 2 lines
Build your own MCP
medium — 31 ch · 52 px · 3 lines
Create a simulator of your boss
long — 46 ch · 40 px · 3 lines
Troubleshoot something on your computer with AI